<template>
	<div>
		<!--新增按钮-->
		<div class="add_btn_wrap">
			<el-button @click="addNewJiJian" type="primary" icon="document">新增寄件单</el-button>
			<el-button @click="allSendOffBtn" icon="document">一键寄出</el-button>
		</div>
		<!-- 搜索 -->
		<div class="">
			<div class="down_search_wrap">
				<div class="search_btn_wrap" style="width: 150px;">
					<el-button @click="exportBtn" class="s_btn_up" style="width: 120px;display: block;margin-bottom: 6px;">导出</el-button>
					<el-button @click="searchBtn" type="primary" class="s_btn_down" style="width: 120px;display: block;margin: 0;">查询</el-button>
				</div>
				<div v-for="item in config.search.search_input" class="input_wrap">
					<label class="label" for="">{{item.placeholder}}：</label>
					<el-input @keyup.enter.native="searchBtn" :placeholder="'请输入'+item.placeholder" v-model="data.exchanged.search[item.name]" size="small" clearable autofocus>
					</el-input>
				</div>
				<div class="select_input_wrap" v-for="items in config.search.search_select">
					<label class="label" for="">{{items.placeholder}}：</label>
					<el-select v-model="data.exchanged.search[items.name]" :placeholder="items.placeholder" :multiple="items.multiple" :filterable="items.filterable" size="small" clearable>
						<el-option v-for="(item, index) in data.received.search[items.name]" :key="item.index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</div>
				<!-- 日期时间范围 -->
				<div class="riqi_wrap">
					<label class="label">时间：</label>
					<el-date-picker @change="timeChange" v-if="config.search.date" v-for="itemDate in config.search.date" v-model="data.exchanged.date[itemDate.name]" :type="itemDate.type" :range-separator="itemDate.separator" :size="itemDate.size" :start-placeholder="itemDate.placeholder+'开始'" :end-placeholder="itemDate.placeholder+'结束'" align="right" value-format="yyyy-MM-dd HH:mm" clearable placeholder="选择日期">
					</el-date-picker>
				</div>
			</div>
		</div>
		<!-- 内容 -->
		<div class="">
			<el-table :data="data.received.table" stripe="stripe" :border='true' element-loading-text="拼命加载中" style="width: 100%">
				<!-- 表格主体 -->
				<el-table-column label="快递单号">
					<template slot-scope="scope">
						<span style="display: block;border: 1px solid #999;padding: 1px 6px;border-radius: 6px;text-align: center;">
							{{ scope.row.expressCompanyName }}
						</span>
						<span @click="toDetail(scope.row)" style="display: block;color: #409eff;cursor: pointer;text-align: center;margin-top: 4px">
							{{ scope.row.waybillNumber }}
						</span>
					</template>
				</el-table-column>
				<el-table-column label="包裹状态">
					<template slot-scope="scope">
						<span v-if="scope.row.status==3" style="color: #999999;">{{ scope.row.statusText }}</span>
						<span v-if="scope.row.status==2" style="color: #5daf34;">{{ scope.row.statusText }}</span>
						<span v-if="scope.row.status==1" style="color: #FF9900;">{{ scope.row.statusText }}</span>
						<span style="color: #999;font-size: 12px;">( {{ scope.row.date }} )</span>
					</template>
				</el-table-column>
				<template v-for="i in config.table.show.items.length">
					<el-table-column :sortable="config.table.sort[config.table.show.prop[i-1]]" :label="config.table.show.items[i-1]" :prop="config.table.show.prop[i-1]" :width="config.table.show.width[i-1]"></el-table-column>
				</template>
				<el-table-column label="操作" v-if="config.table.operate" :width="config.table.operate.width">
					<template slot-scope="scope">
						<el-button v-if="scope.row.status == 1" @click="sendOffBtn(scope.row)" type="primary" size="small">寄出</el-button>
						<el-button @click="againPrint(scope.row)" size="small">重新打印面单</el-button>
						<el-button v-if="scope.row.status == 1" @click="deleteBtn(scope.row)" type="danger" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页-->
		<div class="page_wrap">
			<page-model :data="data" :config="config.page" :dataCount="data.received.count" :limit="data.exchanged.search.limit" :currentPage="data.exchanged.search.page"></page-model>
		</div>
		<!-- 新增弹窗 -->
		<el-dialog :title="Add.config.title" :visible.sync="Add.dialogFormVisible" center>
			<el-form ref="form" :model="Add.data.form" :rules="Add.config.rules" label-width="130px">
				<!--单选下拉框-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.select">
					<el-select v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<!--多选下拉框类型-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.multipleSelect">
					<el-select v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.label" :value="option.value"></el-option>
					</el-select>
				</el-form-item>
				<!-- 普通输入类型 -->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.input">
					<el-input v-model.trim="Add.data.form[item.prop]" class="h-40 w-200" :maxlength="255" :placeholder="item.placeholder"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="Add.dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="commitAdd">确 定</el-button>
			</div>
		</el-dialog>
		<!--新增寄件单弹窗-->
		<el-dialog title="新增寄件单" :visible.sync="addJiJian_dialogTableVisible" width="300px">
			<div class="">
				<el-button disabled style="width: 100%;">输入寄件码</el-button>
			</div>
			<div class="">
				<el-button @click="goJiJianDetail" style="width: 100%;">填写新面单</el-button>
			</div>
		</el-dialog>
		<!--输入寄件码-->
		<el-dialog title="输入寄件码" :visible.sync="sendCode.dialogFormVisible" width="422px">
			<el-form :model="sendCode.form">
				<el-form-item label="">
					<el-input v-model="sendCode.form.sendCode" autocomplete="off"></el-input>
				</el-form-item>
				<div class="">
					寄件码为客户下单时生成的寄件码
				</div>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="sendCode.dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="goJiJianDetail">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	import searchModel from 'components/Common/search-model.vue'
	import tableModel from 'components/Common/table-model.vue'
	import pageModel from 'components/Common/page-model.vue'

	export default {
		components: {
			searchModel,
			tableModel,
			pageModel,
		},
		data() {
			return {
				addJiJian_dialogTableVisible: false,
				sendCode: {
					dialogFormVisible: false,
					form: {
						sendCode: ''
					}
				},
				Add: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							express_number: '',
							pickup_code: '',
							iphone: '',
							express_company: '',
						},
						selectData: {
							express_company: [{
								label: '圆通快递',
								value: 1
							}, {
								label: '韵达快递',
								value: 2
							}],
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '录入包裹',
						form: {
							input: [{
									prop: 'express_number',
									label: '运单号',
									placeholder: '请输入运单号',
								},
								{
									prop: 'pickup_code',
									label: '取件码',
									placeholder: '请输入取件码',
								},
								{
									prop: 'iphone',
									label: '手机号',
									placeholder: '请输入手机号',
								}
							],
							select: [{
								label: '快递公司',
								prop: 'express_company',
								placeholder: '请选择快递公司',
							}]
						},
						rules: {
							Remark: [{
								required: true,
								message: '请输入账户变动详情 备注'
							}]
						}
					}
				},
				Edit: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							express_number: '',
							pickup_code: '',
							iphone: '',
							express_company: '',
						},
						selectData: {
							express_company: [{
								label: '圆通快递',
								value: 1
							}, {
								label: '韵达快递',
								value: 2
							}],
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '修改包裹',
						form: {
							input: [{
									prop: 'express_number',
									label: '运单号',
									placeholder: '请输入运单号',
								},
								{
									prop: 'pickup_code',
									label: '取件码',
									placeholder: '请输入取件码',
								},
								{
									prop: 'iphone',
									label: '手机号',
									placeholder: '请输入手机号',
								}
							],
							select: [{
								label: '快递公司',
								prop: 'express_company',
								placeholder: '请选择快递公司',
							}]
						},
						rules: {

						}
					}
				},
				config: {
					baseApi: 'AdminApi/userList/List',
					search: {
						search_input: [{
							name: 'waybillNumber',
							placeholder: '运单号',
							size: 'large'
						}, {
							name: 'senderMobile',
							placeholder: '寄件人电话',
							size: 'large'
						}],
						search_select: [{
								name: 'expressCompanyId',
								placeholder: '快递公司',
								size: 'large',
								multiple: false,
								filterable: false,
							},
							{
								name: 'status',
								placeholder: '包裹状态',
								size: 'large',
								multiple: false,
								filterable: false,
							}
						],
						date: [{
							name: 'time',
							type: 'datetimerange',
							separator: '-',
							size: 'small',
							placeholder: '-',
						}]
					},
					table: {
						noGroup: false,
						checkbox: false,
						status: false,
						photo: true,
						sort: {
							freight: true,
							weight: true
						},
						show: {
							prop: [
								'senderName',
								'senderMobile',
								'freight',
								'weight',
								'allAddress'
							],
							items: [
								'寄件人',
								'寄件人电话',
								'运费（元）',
								'重量（kg）',
								'寄件地址'
							],
							width: []
						},
						operate: {
							detail: false,
							edit: false,
							makeReceive: false,
							sendMessage: false,
							returnBack: false,
							sendOff: true, //寄出按钮
							printFace: true, //打印面单
							deleteBtn: true, //删除
							//							width: 270,
						}
					},
					page: {
						limits: [5, 10, 20, 50, 100],
						layout: 'total, sizes, prev, pager, next, jumper'
					}
				},
				data: {
					received: {
						table: [],
						count: 10,
						search: {
							siteId: [],
							expressCompanyId: [],
							status: [{
								name: '全部',
								id: ''
							}, {
								name: '待寄出',
								id: 1
							}, {
								name: '已寄出',
								id: 2
							}]
						}
					},
					exchanged: {
						search: {
							limit: 10,
							page: 1,
							siteId: '',
							expressCompanyId: '',
							status: '', //0全部 1待寄出 2已寄出
							waybillNumber: '',
							senderMobile: '',
							startDate: '',
							endDate: '',
						},
						date: {
							time: '',
						}
					}
				}
			}
		},
		created() {
			this.tableData();
			//获取下拉框数据
			this.selectData();
			// 延迟绑定监听
			this.$watch('data.exchanged.search.limit', {
				deep: true,
				handler: function() {
					this.tableData()
				}
			})
			this.$watch('data.exchanged.search.page', {
				deep: true,
				handler: function() {
					this.$router.push({
						path: this.$route.path,
					})
					_g.openGlobalLoading()
					this.tableData()
				}
			})
		},
		methods: {
			tableData() {
				let obj = this.data.exchanged.search;
				let page = obj.page - 1;
				this.apiGet("/api/backend/site/sender-mail/list?page=" + page + "&count=" + obj.limit + "&expressCompanyId=" + obj.expressCompanyId + "&status=" + obj.status + "&waybillNumber=" +
						obj.waybillNumber + "&senderMobile=" + obj.senderMobile + "&startDate=" + obj.startDate +
						"&endDate=" + obj.endDate)
					.then(res => {
						res.data.mails.map(i => {
							//包裹状态
							switch(i.status) {
								case 0:
									i.statusText = '未知'
									break;
								case 1:
									i.statusText = '待寄出'
									break;
								case 2:
									i.statusText = '已寄出'
									break;
								default:
									break;
							}
							i.allAddress = i.address.province + i.address.city + i.address.area + i.address.detail
						})
						this.data.received.table = res.data.mails
						this.data.received.count = res.data.count
						_g.closeGlobalLoading();
					})
			},
			commitAdd() {},
			addNewJiJian() {
				let that = this;
				that.addJiJian_dialogTableVisible = true;
			},
			goJiJianDetail() {
				this.$router.push({
						name: '新增寄件'
					})
			},
			searchBtn() {
				this.tableData();
			},
			//搜索框时间选择
			timeChange() {
				if(this.data.exchanged.date.time) {
					this.data.exchanged.search.startDate = this.data.exchanged.date.time[0]
					this.data.exchanged.search.endDate = this.data.exchanged.date.time[1]
				} else {
					this.data.exchanged.search.startDate = ''
					this.data.exchanged.search.endDate = ''
				}
			},
			//获取下拉框数据
			selectData() {
				let that = this;
				//快递公司
				this.apiGet("/api/dict/express-company/list", null).then(res => {
					if(res.code == 200) {
						that.data.received.search.expressCompanyId = res.data.companies
						that.Edit.data.selectData.expressCompanyId = res.data.companies
					}
				})
			},
			sendOffBtn(row) {
				let that = this;
				that.apiPost("/api/backend/site/sender-mail/send", {
					mailId: row.mailId
				}).then(res => {
					if(res.code == 200) {
						that.$message({
							type: 'success',
							message: '寄出成功！'
						})
						that.tableData()
					}
				})
			},
			againPrint(row) {
				this.$router.push({
					name: '寄件详情',
					query: {
						mailId: row.mailId
					}
				})
			},
			deleteBtn(row) {
				let that = this;
				that.$confirm('此操作将永久删除包裹, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.apiPost("/api/backend/site/sender-mail/remove", {
						mailId: row.mailId
					}).then(res => {
						if(res.code == 200) {
							that.$message({
								type: 'success',
								message: '删除成功！'
							})
							that.tableData()
						}
					})
				}).catch(() => {

				});
			},
			allSendOffBtn() {
				let that = this;
				that.apiPost("/api/backend/site/sender-mail/batch-send", null).then(res => {
					if(res.code == 200) {
						that.$message({
							type: 'success',
							message: '寄出成功！'
						})
						that.tableData()
					}
				})
			},
			toDetail(row) {
				let that = this;
				that.$router.push({
					name: '寄件详情',
					query: {
						mailId: row.mailId
					}
				})
			},
			//导出按钮
			exportBtn() {
				let obj = this.data.exchanged.search;
				window.location.href = axios.defaults.baseURL+"/api/backend/site/sender-mail/export?expressCompanyId=" + obj.expressCompanyId + 
				"&status=" + obj.status + "&waybillNumber=" +obj.waybillNumber + "&senderMobile=" + obj.senderMobile + "&startDate=" + obj.startDate +
					"&endDate=" + obj.endDate;
			},
		},
		mixins: [http]
	}
</script>
<style scoped>
	.add_btn_wrap {
		background: rgba(250, 250, 250, 1);
		padding: 10px 30px;
		text-align: right;
	}
	
	.page_wrap {
		text-align: center;
		padding: 30px;
	}
</style>
<style type="text/css">
	.sendOffClass .el-message-box__btns .el-button {
		display: block;
		border: none;
		margin: 0;
		width: 100%;
		font-size: 20px;
	}
	
	.sendOffClass .el-button--primary {
		background-color: #fff;
		color: #606266;
	}
	
	.sendOffClass .el-message-box__btns .el-button:nth-child(1) {
		border-bottom: 1px solid #999;
	}
	
	.el-message-box__header {
		background: rgba(24, 144, 255, 1);
	}
	
	.el-message-box__title {
		color: #fff;
	}
	
	.el-message-box__headerbtn .el-message-box__close {
		color: #fff;
	}
</style>